<template>
  <!-- 
    vue3中路由器的创建步骤：
    1、安装 vue-router ：  npm i -S vue-router@4 ;
    2、创建路由器模块 并 配置 ；
            创建： src - router 文件夹 - index.ts（路由器模块）
            配置路由器的步骤：
                            (1)、从 vue-router 中，引入我们需要的东西；
                                createRouter -- 是帮我们创建router的。
                                createWebHashHistory  -- hash模式
                                createWebHistory  --  history模式
                            (2)、配置路由器 router
                                history -- 模式
                                routes  -- 配置路由  [{},{}]
                                注意：
                                    使用绝对路径； 就是引入路由组件的时候，路径必须要写成绝对路径，否则会报错。(绝对路径的配置 vue3自己是配置好的，直接用就行了)
                            (3)、暴露router
    3、在入口文件main.ts中引入router，并注册
    4、创建路由组件 ： src -- views/pages 文件夹 -- 路由组件
    5、设置router-link；
    6、设置router-view。

    vue3 中 路由组件 组件间传值 query和params传值
    思路：整体思路和用法，是与vue2中的一样，不一样的地方在于值得获取，引入vue3中一个api ，useRoute 在这个api中可以获得路由信息
    1、query传参
          (1) 格式： 在url地址后面，拼接 ? key = value & key = value
          (2) 传参：  :to="{name:'路由的名字',query:{ 属性名:要传的值 }}"
          (3) 接收：  
                    1、想要在setup函数中获得路由信息，就得先引入 api -- useRoute
                      import {useRoute} from 'vue-router'
                    2、let route = useRoute();
                      console.log(route.query.属性名) 就能得到传过来的值
    2、params传参
          注意：路径的处理；
          (1) 格式：路由路径的后面要设置占位符   例如  /:id
          (2) 传参： :to="{name:'路由的名字',params:{ 属性名:要传的值 }}"
          (3) 接收：  
                    1、想要在setup函数中获得路由信息，就得先引入 api -- useRoute
                      import {useRoute} from 'vue-router'
                    2、let route = useRoute();
                      console.log(route.params.属性名) 就能得到传过来的值
  -->
  <div>
    <h1>vue-router</h1>
    <span>
      <router-link :to="{name:'home'}">
        首页
      </router-link>
    </span>
    <span>
      <router-link :to="{name:'login'}">
        登录
      </router-link>
    </span>
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {


    return {}
  }
})
</script>

<style scoped lang="scss">
  span{
    margin:0 20px;
  }
</style>